<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页面 - 用户中心</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入自定义CSS -->
    <link rel="stylesheet" href="style.css">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        accent: '#722ED1',
                        neutral: '#F5F7FA',
                        dark: '#1D2129'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <!-- 左侧Logo和导航 -->
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center">
                        <i class="fa fa-connectdevelop text-primary text-2xl mr-2"></i>
                        <span class="font-bold text-xl text-primary">UserHub</span>
                    </div>
                    <nav class="hidden md:ml-10 md:flex md:space-x-8">
                        <a href="dashboard.html" class="text-primary border-primary inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                            首页
                        </a>
                        <a href="messages.html" class="text-gray-500 hover:text-primary hover:border-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors duration-200">
                            消息
                        </a>
                        <a href="tasks.html" class="text-gray-500 hover:text-primary hover:border-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors duration-200">
                            任务
                        </a>
                        <a href="settings-profile.html" class="text-gray-500 hover:text-primary hover:border-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors duration-200">
                            设置
                        </a>
                    </nav>
                </div>
                
                <!-- 右侧用户区域 -->
                <div class="flex items-center">
                    <!-- 搜索按钮 -->
                    <button class="p-2 rounded-full text-gray-500 hover:text-primary hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary mr-2 transition-colors duration-200">
                        <i class="fa fa-search"></i>
                    </button>
                    
                    <!-- 通知按钮 - 修复后 -->
                    <a href="messages.html" class="p-2 rounded-full text-gray-500 hover:text-primary hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary relative mr-2 transition-colors duration-200">
                        <i class="fa fa-bell"></i>
                        <span class="absolute top-1 right-1 block h-2 w-2 rounded-full bg-red-500 ring-2 ring-white"></span>
                    </a>

                    <!-- 用户菜单 - 保持不变 -->
                    <div class="ml-3 relative">
                        <div>
                            <button type="button" class="flex items-center max-w-xs rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" id="user-menu-button">
                                <img class="h-8 w-8 rounded-full object-cover" src="https://picsum.photos/id/64/200/200" alt="用户头像" id="header-avatar">
                                <span class="ml-2 hidden md:block text-sm font-medium text-gray-700" id="user-display-name">张三</span>
                                <i class="fa fa-chevron-down ml-1 text-xs text-gray-500 hidden md:block"></i>
                            </button>
                        </div>
                    </div>
                        
                        <!-- 下拉菜单 (默认隐藏) -->
                        <div class="user-menu-dropdown hidden absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50" id="user-menu-dropdown">
                            <div class="py-1">
                                <button class="user-menu-item w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="window.location.href='settings-profile.html'">
                                    <i class="fa fa-user-circle mr-2"></i>个人资料
                                </button>
                                <button class="user-menu-item w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="window.location.href='settings-security.html'">
                                    <i class="fa fa-lock mr-2"></i>账户安全
                                </button>
                                <button class="user-menu-item w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="window.location.href='settings-notifications.html'">
                                    <i class="fa fa-bell mr-2"></i>通知设置
                                </button>
                                <div class="border-t border-gray-100 my-1"></div>
                                <button class="user-menu-item w-full text-left px-4 py-2 text-sm text-red-500 hover:bg-gray-100" id="logout-button">
                                    <i class="fa fa-sign-out mr-2"></i>退出登录
                                </button>
                            </div>
                        </div>
                    </div>
                                        
                    <!-- 移动端菜单按钮 -->
                    <button type="button" class="ml-4 md:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-500 hover:text-primary hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" id="mobile-menu-button">
                        <i class="fa fa-bars"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div class="md:hidden hidden" id="mobile-menu">
            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                <a href="dashboard.html" class="bg-primary/10 text-primary block pl-3 pr-4 py-2 border-l-4 border-primary text-base font-medium">
                    首页
                </a>
                <a href="messages.html" class="text-gray-500 hover:bg-gray-50 hover:text-primary hover:border-primary block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">
                    消息
                </a>
                <a href="tasks.html" class="text-gray-500 hover:bg-gray-50 hover:text-primary hover:border-primary block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">
                    任务
                </a>
                <a href="settings-profile.html" class="text-gray-500 hover:bg-gray-50 hover:text-primary hover:border-primary block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">
                    设置
                </a>
            </div>
        </div>
    </header>

    <!-- 主内容区域 -->
    <main class="flex-grow">
        <!-- 欢迎区域 -->
        <section class="bg-gradient-custom text-white py-12 md:py-20">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="max-w-3xl">
                    <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">欢迎回来，<span id="welcome-username">张三</span>！</h1>
                    <p class="text-lg text-white/90 mb-8">
                        今天是 <span id="current-date"></span>，您有 3 条未读消息和 2 个待办任务。
                    </p>
                    <div class="flex flex-wrap gap-4">
                        <button class="bg-white text-primary hover:bg-gray-100 font-medium py-2 px-6 rounded-lg transition-colors duration-200 shadow-lg" onclick="window.location.href='tasks.html'">
                              查看任务
                        </button>
                        <button class="bg-transparent border border-white text-white hover:bg-white/10 font-medium py-2 px-6 rounded-lg transition-colors duration-200"
                                    onclick="window.location.href='settings-profile.html'">
                                    编辑资料
                            </button>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 数据概览 -->
        <section class="py-10 bg-white">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <h2 class="text-2xl font-bold mb-8">数据概览</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <!-- 卡片1 -->
                    <div class="bg-neutral rounded-xl p-6 shadow-sm card-hover">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-gray-500 font-medium">完成任务</h3>
                            <span class="bg-green-100 text-green-800 p-2 rounded-full">
                                <i class="fa fa-check"></i>
                            </span>
                        </div>
                        <p class="text-3xl font-bold mb-2">24</p>
                        <p class="text-green-600 text-sm flex items-center">
                            <i class="fa fa-arrow-up mr-1"></i> 较上周增长 12%
                        </p>
                    </div>
                    
                    <!-- 卡片2 -->
                    <div class="bg-neutral rounded-xl p-6 shadow-sm card-hover">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-gray-500 font-medium">消息通知</h3>
                            <span class="bg-blue-100 text-blue-800 p-2 rounded-full">
                                <i class="fa fa-envelope"></i>
                            </span>
                        </div>
                        <p class="text-3xl font-bold mb-2">18</p>
                        <p class="text-blue-600 text-sm flex items-center">
                            <i class="fa fa-arrow-up mr-1"></i> 较上周增长 5%
                        </p>
                    </div>
                    
                    <!-- 卡片3 -->
                   <div class="bg-neutral rounded-xl p-6 shadow-sm card-hover cursor-pointer" onclick="window.location.href='points-detail.html'">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-gray-500 font-medium">积分余额</h3>
                        <span class="bg-purple-100 text-purple-800 p-2 rounded-full">
                            <i class="fa fa-star"></i>
                        </span>
                    </div>
                    <p class="text-3xl font-bold mb-2">1,250</p>
                    <p class="text-purple-600 text-sm flex items-center">
                        <i class="fa fa-arrow-up mr-1"></i> 较上周增长 8%
                    </p>
                </div>
                    
                    <!-- 卡片4 -->
                    <div class="bg-neutral rounded-xl p-6 shadow-sm card-hover" onclick="window.location.href='activity-detail.html'">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-gray-500 font-medium">活动参与</h3>
                            <span class="bg-orange-100 text-orange-800 p-2 rounded-full">
                                <i class="fa fa-calendar"></i>
                            </span>
                        </div>
                        <p class="text-3xl font-bold mb-2">7</p>
                        <p class="text-orange-600 text-sm flex items-center">
                            <i class="fa fa-arrow-down mr-1"></i> 较上周减少 1
                        </p>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 最近活动和任务 -->
        <section class="py-10 bg-gray-50">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
                    <h2 class="text-2xl font-bold">最近动态</h2>
                    <a href="messages.html" class="text-primary hover:text-primary/80 font-medium mt-2 md:mt-0 transition-colors duration-200">
                        查看全部 <i class="fa fa-arrow-right ml-1"></i>
                    </a>
                </div>
                
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    <!-- 左侧：待办任务 -->
                    <div class="lg:col-span-2 bg-white rounded-xl shadow-sm overflow-hidden">
                        <div class="p-6 border-b border-gray-100">
                            <h3 class="font-bold text-lg">待办任务</h3>
                        </div>
                        <div class="divide-y divide-gray-100">
                            <!-- 任务1 -->
                            <div class="p-6 flex items-start">
                                <div class="flex-shrink-0 mt-1">
                                    <input type="checkbox" class="h-5 w-5 text-primary border-gray-300 rounded focus:ring-primary">
                                </div>
                                <div class="ml-4 flex-grow">
                                    <h4 class="font-medium text-gray-900">完成项目计划书</h4>
                                    <p class="text-sm text-gray-500 mt-1">需要在周五之前提交给项目经理审核</p>
                                    <div class="mt-3 flex items-center text-xs text-gray-500">
                                        <span class="bg-red-100 text-red-800 px-2 py-1 rounded-full">紧急</span>
                                        <span class="ml-3"><i class="fa fa-calendar-o mr-1"></i> 2025-06-15</span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 任务2 -->
                            <div class="p-6 flex items-start">
                                <div class="flex-shrink-0 mt-1">
                                    <input type="checkbox" class="h-5 w-5 text-primary border-gray-300 rounded focus:ring-primary">
                                </div>
                                <div class="ml-4 flex-grow">
                                    <h4 class="font-medium text-gray-900">参加团队周会</h4>
                                    <p class="text-sm text-gray-500 mt-1">讨论上周进度和本周计划安排</p>
                                    <div class="mt-3 flex items-center text-xs text-gray-500">
                                        <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">中等</span>
                                        <span class="ml-3"><i class="fa fa-calendar-o mr-1"></i> 2025-06-12</span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 任务3 -->
                            <div class="p-6 flex items-start">
                                <div class="flex-shrink-0 mt-1">
                                    <input type="checkbox" checked class="h-5 w-5 text-primary border-gray-300 rounded focus:ring-primary">
                                </div>
                                <div class="ml-4 flex-grow">
                                    <h4 class="font-medium text-gray-500 line-through">更新个人资料</h4>
                                    <p class="text-sm text-gray-400 mt-1 line-through">上传最新的头像和个人介绍</p>
                                    <div class="mt-3 flex items-center text-xs text-gray-500">
                                        <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full">已完成</span>
                                        <span class="ml-3"><i class="fa fa-calendar-o mr-1"></i> 2025-06-10</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 右侧：最近通知 -->
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                        <div class="p-6 border-b border-gray-100">
                            <h3 class="font-bold text-lg">最近通知</h3>
                        </div>
                        <div class="divide-y divide-gray-100">
                            <!-- 通知1 -->
                            <div class="p-6">
                                <div class="flex">
                                    <div class="flex-shrink-0">
                                        <span class="bg-primary/10 text-primary p-2 rounded-full">
                                            <i class="fa fa-user-plus"></i>
                                        </span>
                                    </div>
                                    <div class="ml-4">
                                        <p class="text-sm text-gray-700">
                                            <span class="font-medium">李四</span> 请求添加您为好友
                                        </p>
                                        <p class="text-xs text-gray-500 mt-1">10分钟前</p>
                                        <div class="mt-3 flex space-x-2">
                                            <button class="text-xs bg-primary text-white px-3 py-1 rounded-full hover:bg-primary/90 transition-colors duration-200">
                                                接受
                                            </button>
                                            <button class="text-xs bg-gray-200 text-gray-700 px-3 py-1 rounded-full hover:bg-gray-300 transition-colors duration-200">
                                                拒绝
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 通知2 -->
                            <div class="p-6">
                                <div class="flex">
                                    <div class="flex-shrink-0">
                                        <span class="bg-green-100 text-green-600 p-2 rounded-full">
                                            <i class="fa fa-trophy"></i>
                                        </span>
                                    </div>
                                    <div class="ml-4">
                                        <p class="text-sm text-gray-700">
                                            您获得了 <span class="font-medium text-green-600">月度最佳贡献者</span> 称号
                                        </p>
                                        <p class="text-xs text-gray-500 mt-1">昨天</p>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 通知3 -->
                            <div class="p-6">
                                <div class="flex">
                                    <div class="flex-shrink-0">
                                        <span class="bg-purple-100 text-purple-600 p-2 rounded-full">
                                            <i class="fa fa-calendar"></i>
                                        </span>
                                    </div>
                                    <div class="ml-4">
                                        <p class="text-sm text-gray-700">
                                            下周三将举行 <span class="font-medium">季度总结大会</span>，请准时参加
                                        </p>
                                        <p class="text-xs text-gray-500 mt-1">3天前</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-8">
        
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="flex items-center mb-4 md:mb-0">
                    <i class="fa fa-connectdevelop text-primary text-xl mr-2"></i>
                    <span class="font-bold text-lg text-primary">用户中心</span>
                </div>
               <div class="flex space-x-6">
                <a href="https://weixin.qq.com" class="text-gray-400 hover:text-primary transition-colors duration-200" title="微信">
                    <i class="fa fa-weixin text-xl"></i>
                </a>
                <a href="https://im.qq.com/index" class="text-gray-400 hover:text-primary transition-colors duration-200" title="QQ">
                    <i class="fa fa-qq text-xl"></i>
                </a>
                <a href="https://weibo.com/newlogin?tabtype=weibo&gid=102803&openLoginLayer=0&url=https%3A%2F%2Fweibo.com%2F" class="text-gray-400 hover:text-primary transition-colors duration-200" title="微博">
                    <i class="fa fa-weibo text-xl"></i>
                </a>
                
            </div>
                
            </div>
            <section class="mb-12">
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-xl font-bold">工作记录</h2>
        <button class="text-primary hover:text-primary/80 text-sm font-medium transition-colors">
            查看全部 <i class="fa fa-arrow-right ml-1"></i>
        </button>
    </div>
    
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="relative group overflow-hidden rounded-xl shadow-sm cursor-pointer aspect-square">
            <img src="one.jpg" alt="图片预览" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
            <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                <i class="fa fa-search-plus text-white text-xl"></i>
            </div>
        </div>
        <div class="relative group overflow-hidden rounded-xl shadow-sm cursor-pointer aspect-square">
            <img src="2.jpg" alt="图片预览" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
            <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                <i class="fa fa-search-plus text-white text-xl"></i>
            </div>
        </div>
        <div class="relative group overflow-hidden rounded-xl shadow-sm cursor-pointer aspect-square">
            <img src="3.jpg" alt="图片预览" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
            <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                <i class="fa fa-search-plus text-white text-xl"></i>
            </div>
        </div>
        <div class="relative group overflow-hidden rounded-xl shadow-sm cursor-pointer aspect-square border-2 border-dashed border-gray-200 flex items-center justify-center text-gray-400 hover:border-primary hover:text-primary transition-colors">
            <a href="4.jpg" class="w-full h-full flex items-center justify-center">
                <i class="fa fa-plus text-2xl"></i>
            </a>
        </div>
    </div>
</section>

<!-- 视频播放区 -->
<section id="videos-section">
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-xl font-bold">视频内容</h2>
        <button class="text-primary hover:text-primary/80 text-sm font-medium transition-colors">
            查看全部 <i class="fa fa-arrow-right ml-1"></i>
        </button>
    </div>
    
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- 主要视频播放器 -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden video-player-container">
            <div class="relative aspect-video bg-gray-900">
                <video id="main-video" class="w-full h-full object-cover" poster="https://picsum.photos/id/1035/1200/675">
                    <source src="屏幕录制 2025-09-09 145500.mp4" type="video/mp4">
                    您的浏览器不支持视频播放
                </video>
                <div id="video-placeholder" class="absolute inset-0 flex flex-col items-center justify-center text-white">
                    <button id="play-video" class="w-16 h-16 rounded-full bg-primary/90 flex items-center justify-center mb-4 hover:bg-primary transition-colors">
                        <i class="fa fa-play text-xl"></i>
                    </button>
                    <p class="text-center px-4">点击播放视频</p>
                </div>
                <div id="video-controls" class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4 hidden">
                    <div class="flex items-center justify-between mb-2">
                        <div class="flex items-center space-x-4">
                            <button id="video-play-btn" class="text-white hover:text-primary">
                                <i class="fa fa-play"></i>
                            </button>
                            <div class="relative group">
                                <button class="text-white hover:text-primary text-sm flex items-center">
                                    <span id="speed-display">1.0x</span>
                                    <i class="fa fa-caret-down ml-1"></i>
                                </button>
                                <div class="absolute bottom-full left-0 mb-2 bg-dark/95 text-white rounded py-1 w-20 hidden group-hover:block z-10">
                                    <button class="speed-option w-full text-left px-3 py-1 hover:bg-primary/20 text-sm" data-speed="0.5">0.5x</button>
                                    <button class="speed-option w-full text-left px-3 py-1 hover:bg-primary/20 text-sm" data-speed="0.75">0.75x</button>
                                    <button class="speed-option w-full text-left px-3 py-1 hover:bg-primary/20 text-sm" data-speed="1.0">1.0x</button>
                                    <button class="speed-option w-full text-left px-3 py-1 hover:bg-primary/20 text-sm" data-speed="1.25">1.25x</button>
                                    <button class="speed-option w-full text-left px-3 py-1 hover:bg-primary/20 text-sm" data-speed="1.5">1.5x</button>
                                    <button class="speed-option w-full text-left px-3 py-1 hover:bg-primary/20 text-sm" data-speed="2.0">2.0x</button>
                                </div>
                            </div>
                        </div>
                        <div class="text-white text-sm" id="video-time">01:23 / 05:45</div>
                    </div>
                    <div class="w-full h-2 bg-white/30 rounded-full overflow-hidden cursor-pointer" id="progress-container">
                        <div id="progress-bar" class="h-full bg-primary w-0"></div>
                    </div>
                </div>
            </div>
            <div class="p-4">
                <h3 class="font-medium" id="video-title">产品功能介绍与使用指南</h3>
                <p class="text-gray-500 text-sm mt-1" id="video-description">了解如何充分利用我们平台的各项功能</p>
            </div>
        </div>
        
        <!-- 视频列表 -->
        <div class="space-y-4 video-list-container">
            <!-- 视频项添加data属性存储视频信息 -->
            <div class="flex gap-4 bg-white p-3 rounded-xl shadow-sm hover:shadow-md transition-shadow cursor-pointer video-item"
                 data-video="屏幕录制 2025-09-09 153009.mp4"
                 data-title="产品功能介绍与使用指南"
                 data-description="了解如何充分利用我们平台的各项功能"
                 data-poster="https://picsum.photos/id/1035/1200/675">
                <div class="relative w-32 h-20 flex-shrink-0">
                    <img src="屏幕截图 2025-09-09 152735.png" alt="视频缩略图" class="w-full h-full object-cover rounded-lg">
                    <div class="absolute inset-0 flex items-center justify-center">
                        <div class="w-8 h-8 rounded-full bg-primary/90 flex items-center justify-center">
                            <i class="fa fa-play text-sm text-white"></i>
                        </div>
                    </div>
                    <div class="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-1.5 py-0.5 rounded">
                        00:25
                    </div>
                </div>
                <div>
                    <h4 class="font-medium text-sm">产品功能介绍与使用指南</h4>
                    <p class="text-gray-500 text-xs mt-1">了解如何充分利用我们平台的各项功能</p>
                </div>
            </div>
            
            <div class="flex gap-4 bg-white p-3 rounded-xl shadow-sm hover:shadow-md transition-shadow cursor-pointer video-item"
                 data-video="屏幕录制 2025-09-09 162208.mp4"
                 data-title="账户安全设置教程"
                 data-description="保护您的账户安全，设置两步验证"
                 data-poster="https://picsum.photos/id/1039/1200/675">
                <div class="relative w-32 h-20 flex-shrink-0">
                    <img src="屏幕截图 2025-09-09 182503.png" alt="视频缩略图" class="w-full h-full object-cover rounded-lg">
                    <div class="absolute inset-0 flex items-center justify-center">
                        <div class="w-8 h-8 rounded-full bg-primary/90 flex items-center justify-center">
                            <i class="fa fa-play text-sm text-white"></i>
                        </div>
                    </div>
                    <div class="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-1.5 py-0.5 rounded">
                        00:10
                    </div>
                </div>
                <div>
                    <h4 class="font-medium text-sm">账户安全设置教程</h4>
                    <p class="text-gray-500 text-xs mt-1">保护您的账户安全，设置两步验证</p>
                </div>
            </div>
            
            <div class="flex gap-4 bg-white p-3 rounded-xl shadow-sm hover:shadow-md transition-shadow cursor-pointer video-item"
                 data-video="屏幕录制 2025-09-09 163321.mp4"
                 data-title="集成服务使用方法"
                 data-description="如何连接并使用第三方集成服务"
                 data-poster="https://picsum.photos/id/1040/1200/675">
                <div class="relative w-32 h-20 flex-shrink-0">
                    <img src="屏幕截图 2025-09-09 182745.png" alt="视频缩略图" class="w-full h-full object-cover rounded-lg">
                    <div class="absolute inset-0 flex items-center justify-center">
                        <div class="w-8 h-8 rounded-full bg-primary/90 flex items-center justify-center">
                            <i class="fa fa-play text-sm text-white"></i>
                        </div>
                    </div>
                    <div class="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-1.5 py-0.5 rounded">
                        00:36
                    </div>
                </div>
                <div>
                    <h4 class="font-medium text-sm">集成服务使用方法</h4>
                    <p class="text-gray-500 text-xs mt-1">如何连接并使用第三方集成服务</p>
                </div>
            </div>
        </div>
    </div>
</section>
            <div class="mt-6 border-t border-gray-200 pt-6 flex flex-col md:flex-row justify-between items-center">
                <p class="text-sm text-gray-500">
                    &copy; 2025 UserHub. 保留所有权利.
                </p>
                <div class="mt-4 md:mt-0 flex space-x-6">
                    <a href="privacy-policy.html" class="text-sm text-gray-500 hover:text-primary transition-colors duration-200">隐私政策</a>
                    <a href="terms-of-service.html" class="text-sm text-gray-500 hover:text-primary transition-colors duration-200">使用条款</a>
                    <a href="help-center.html" class="text-sm text-gray-500 hover:text-primary transition-colors duration-200">帮助中心</a>
                </div>
            </div>
            
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>
